<template>
  <div id="goodsAdd">
    <div class="user-title">商品管理  <em>/</em>  <span>新增商品  </span></div>
    <div class="user-box">
      <el-form class="demo-ruleForm" label-width="90px" >
        <!--:model="registerForm" status-icon :rules="registerRules" ref="registerForm"-->
        <template>
          <div class="user-form">
            <el-form-item label="商品名称：" >
              <el-input  placeholder="请输入名称" v-model="formGoods.goodsName" class="w_input"></el-input>
            </el-form-item>
            <el-form-item label="商品类型：" >
              <el-cascader
                :options="formGoods.goodsCats"  @change="goodscatsChange">
              </el-cascader>
            </el-form-item>
            <el-form-item label="市场价格：" >
              <el-input-number v-model="formGoods.marketPrice" @change="handleChange" :step="0.01" :min="0" :max="9999.99" size="small"></el-input-number>
            </el-form-item>
            <el-form-item label="商品价格：" >
              <el-input-number v-model="formGoods.shopPrice" @change="handleChange" :step="0.01" :min="0" :max="9999.99"  size="small"></el-input-number>
            </el-form-item>
            <el-form-item label="缩略图：">
              <el-upload
                action="api/file/upload"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-success="fileUploads"
                :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="formGoods.dialogVisible">
                <img width="100%" :src="formGoods.dialogImageUrl" alt="">
              </el-dialog>
              <el-upload
                class="avatar-uploader"
                :on-success ="uploadOK"
                :on-change="uploadChange"
                :on-error="uploadError"
                :data="imgBase64"
                ref="upload"
                :auto-upload="false"
                action="api/file/upload"
                :show-file-list="false">
                <img v-if="imageUrlL" :src="imageUrlL" class="avatar" >
                <p v-else class=" avatar-uploader-icon" >选择图片</p>
              </el-upload>
            </el-form-item>
            <el-form-item label="商品描述:">
              <div class="desc">
                <el-input
                  type="textarea"
                  placeholder="请输入内容"
                  v-model="goodsDesc">
                </el-input>
                <!--<quill v-model="goodsDesc" :config="config" @change="selectionChange"></quill>-->
              </div>
            </el-form-item>
          </div>
        </template>
        <div class="line"></div>
        <div class="input_box ">
          <el-button type="primary"  @click="save()">确定</el-button>
        </div>
      </el-form>
    </div>    <!--图片裁切弹窗-组件-->
    <imgCropper :cropData="cropData" @submitUpload="submitUpload" ref="crop"/>

  </div>
</template>
<script>
import imgCropper from '../../comUnit/pictureCropper'

import '@static/cropperjs/cropper.css'
import '@static/cropperjs/cropper.js'
export default {
  name: 'goodsAdd',
  data () {
    return {
      msg: '添加商品',
      imageUrlL: '',
      imgBase64: {data:''},
      dialogImageUrl: '',
      pictureCutShow: false,
      cropData: {
        scale: 356 / 200,
        cutImgUrl: '',
        result: ''
      },
      formGoods: {
        goodsName: '',
        goods_class_id: '',
        goodsCats: [],
        dialogImageUrl: '',
        marketPrice: 0.00,
        shopPrice: 0.00,
        imgPath: []
      },
      goodsDesc: '',
      // goodsDesc: {ops: []},
      config: {
        placeholder: '请输入商品详情'
      },
      dialogVisible: false
    }
  },
  mounted: function () {
    this.getGoodsCats()
  },
  components: {
    imgCropper
  },

  methods: {
    submitUpload () {
      this.imgBase64.data = this.cropData.result
      this.$refs.upload.submit()
    },
    /*上传成功后保存文件名字*/
    uploadOK (response, file) {
      var _this = this
      this.imageUrlL = this.cropData.cutImgUrl ? this.cropData.cutImgUrl : this.cropData.result;
      // this.formGoods.logo = response.data
      this.$message({
        message: '操作成功',
        type: 'success'
      })
      setTimeout(function () {
        _this.cropData.uploading = false
      }, 100)
    },
    /*上传logo--失败*/
    uploadError (err, file, fileList) {
      var _this = this
      this.$message({
        message: '操作失败',
        type: 'error'
      })
      setTimeout(function () {
        _this.cropData.uploading = false
      }, 100)
    },
    /*上传队列改变时--要做的处理*/
    uploadChange (file) {
      if (this.cropData.uploading) return
      this.cropData.uploading = true
      this.$refs.crop.showModel()
      this.cropData.cutImgUrl = URL.createObjectURL(file.raw)
    },
    selectionChange (editor, html) {
      console.log(html)
    },
    fileUploads (response, file, fileList) {
      let object = ''
      // let path = ''
      let array = []
      this.formGoods.imgPath = []
      for (let i = 0; i < fileList.length; i++) {
        array = fileList[i].response.data[0].fd.split('assets')
        object = {
          path: array[1],
          size: fileList[i].size
        }
        this.formGoods.imgPath.push(object)
      }
      console.log(this.formGoods.imgPath)
    },
    handleChange (value) {
      console.log(value)
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.formGoods.dialogImageUrl = file.url
      this.formGoods.dialogVisible = true
    },
    goodscatsChange (value) {
      if (value.length > 1) {
        this.formGoods.goods_class_id = value[1]
      } else {
        this.formGoods.goods_class_id = value[0]
      }
    },
    getGoodsCats () {
      var _self = this
      this.$http.post('/api/goodscats/cascade')
        .then(response => {
          _self.formGoods.goodsCats = response.data.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    save () {
      let parms = this.formGoods
      parms.goodsDesc = this.goodsDesc

      this.$http.post('/api/goods/save', parms)
        .then(response => {
          this.$message({
            message: '操作成功！',
            type: 'success'
          })
          // this.$refs[formName].resetFields();//清空表单，并初始化数据
          // window.location.href="login.jsp?backurl="+window.location.href;
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="less">
  #goodsAdd{
    width: 100%;
    height: 100%;
    border: 1px solid #d2dae9;
    background: #fff;
    padding:0 35px;
    .user-title{
      height: 60px;
      line-height: 60px;
      border-bottom: 1px solid #eeeeee;
      color: #333;
      font-size: 14px;
      em{
        font-style:normal;
        margin: 0 5px;
        color: #aaa;
      }
      span{ color: #666;}
    }
    .w_input{width: 30%}
    .input_box{margin: 22px 90px}
    .el-input__inner{color: #999}
    .el-form-item__label{color: #333}
    .el-select{width: 100%}
    textarea{height: 160px}
    .dialog-footer{text-align: center!important;}
    .user-box{
      min-height: calc(~"100vh - 180px");
      .user-form{
        width: 1180px;
        margin: 30px 0;
      }
      .el-checkbox{margin-right: 20px}
      .el-checkbox+.el-checkbox{margin-left: 0}
      .line{border-bottom: 1px solid #eeeeee;}
    }
    //编辑器
    .desc{
      width: 700px;
      border-radius: 4px;
      .ql-toolbar .ql-snow{
        border: 1px solid #dcdfe6;
      }
      .ql-editor{
        min-height: 160px;
        line-height: 26px;
      }
    }
    .el-input__inner{
      border:1px solid #dcdfe6;
    }
  .avatar-uploader{
    img{
      width: 300px;
    }
  }
  }
</style>
